<template>
	<view class="content">
		<view class="add-top flex mt20">
			<view class="add-icon">
				<span class="iconfont center">&#xe614;</span>
			</view>
			<view class="add-info">
				<view class="add-user">
					<span class="userinfo name">{{userInfo.name}}</span>
					<span class="userinfo phone">{{userInfo.phone}}</span>
				</view>
				<view class="add-dress province">
					<span class="userinfo">{{userInfo.province}}</span>
					<span class="userinfo">{{userInfo.city}}</span>
					<span class="userinfo">{{userInfo.county}}</span>
					<span class="userinfo">{{userInfo.mark}}</span>
				</view>
			</view>
		</view>
		<view class="padBox mt20">
			<view class="ordermain">
				<view class="ordereg" v-for="item in list" :key="item.id">
					<orderModule :orderData="item"></orderModule>
				</view>
				<view class="total">
					<view class="flex total-cell">
						<view class="total-tit">商品金额</view>
						<view class="total-info flex">￥88</view>
					</view>
					<view class="flex total-cell">
						<view class="total-tit">优惠券</view>
						<view class="total-info flex">-￥15 </view>
					</view>
					<view class="flex total-cell">
						<view class="total-tit">配送费</view>
						<view class="total-info flex">￥8</view>
					</view>
				</view>
				<u-gap height="2" bg-color="#f0f0f0"></u-gap>
				<view class="total-num">共1件商品 小计：<span class="total-pri">￥12</span></view>
			</view>
		</view>
		<view class="flex ord-pay">
			<view class="pay-lf">合计：<span class="pay-pri">199.00</span></view>
			<view>
				<u-button shape="circle" :custom-style="customStyle" hair-line="false" @click="">提交订单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import orderModule from "../../components/orderitems/modualar.vue"
	export default {
		components: {
			orderModule
		},
		data() {
			return {
				userInfo: {
					name: "用户姓名",
					phone: "12345678910",
					province: "四川省",
					city: "成都市",
					county: "高新区",
					mark: "天府大道中段53号"
				},
				list: [{
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp", //商品图片
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...", //商品名称             
					goods_spec: "大码", //商品规格              
					goods_discount: 40.8, //商品折扣            
					goods_price: 58.8, //商品价格             
					checked: true, //是否选中该商品              
					number: 4, //商品购买数量
					id: '201929892'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...",
					goods_spec: "中码",
					goods_discount: 40,
					goods_price: 58.8,
					checked: true,
					number: 1,
					id: '201929893'
				}],
				customStyle: {
					background: "#F74562",
					color: "#FFFFFF"
				},
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 20rpx;
	}

	.add-top {
		padding: 35rpx 20rpx;
		border-radius: 12rpx;
		background: #FFFFFF;
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;
		background: #F7274A;
		border-radius: 24rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.add-info {
		width: 600rpx;
	}

	.userinfo {
		display: inline-block;
		margin-right: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 28rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
	}

	.province {
		color: #999999;
		font-size: 26rpx;
		margin-top: 24rpx;
	}

	.ordermain {
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.ordereg {
		padding: 32rpx 10rpx;
	}

	.ord-itm {
		align-items: flex-start;
	}

	.ord-tit {
		padding: 30rpx 20rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.ord-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.ord-img image {
		width: 160rpx;
		height: 160rpx;
	}

	.ord-cen {
		width: 335rpx;
	}

	.ord-goodname {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.ord-rig {
		width: 100rpx;
	}

	.ord-pri {
		color: #333333;
		font-size: 24rpx;
	}

	.ord-num {
		font-size: 22rpx;
		color: #999999;
		margin-top: 68rpx;
		text-align: right;
		padding-right: 10rpx;
	}

	.total {
		padding: 0 24rpx 28rpx;
	}

	.total-num {
		font-size: 26rpx;
		color: #333333;
		text-align: right;
		padding: 32rpx 24rpx 36rpx;
	}

	.total-pri {
		color: #F14951;
	}

	.total-cell {
		margin-top: 48rpx;
	}

	.total-tit {
		color: #999999;
		font-size: 26rpx;
	}

	.total-info {
		color: #333333;
		font-size: 26rpx;
	}

	.details {
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 20rpx;
	}

	.item {
		font-size: 24rpx;
		color: #333333;
		padding: 20rpx 0;
	}

	.serve {
		height: 100rpx;
		padding: 30rpx 0;
	}

	.serve-item {
		width: 50%;
		justify-content: center;
		border-right: 1rpx solid #F0F0F0;
	}

	.serve-item:last-child {
		border-right: none;
	}

	.serve-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.serve-tit {
		color: #666666;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.ord-pay {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 5;
	}

	.pay-lf {
		font-size: 24rpx;
		color: #333333;
	}

	.pay-pri {
		color: #F14951;
		font-size: 32rpx;
	}
</style>
